import React, { Component } from 'react'
import {connect} from 'dva';
import styles from '../index.less';
import {PLATFORM_NUMBER} from "../../../enum"
import { Table,Divider,Pagination, message,Button } from 'antd';
import SelectInput from './SelectInput'
import ModefyAccount from './ModefyAccount'
import AddAccount from './AddAccount'
// const platformNumber=PLATFORM_NUMBER.SUPPLIER_USER
@connect(({cooperativeStore})=>({
   Refresh:cooperativeStore.refrenshList
 }))
export default class AccountList extends React.Component{
    state={
        cooper:[],
        visible: false,
        val: {},
        showElem:'block',

        pageIndex: 1,//当前页
        pageSize: 10,//当前条数
        total: '',
    }
    componentDidMount(){
        this.getList();
    }
    getList=()=>{
        console.log('getlist')
        const { dispatch } = this.props;
        dispatch({
            type: 'cooperativeStore/querySysUser',
            payload:{
                data:{
                    "parentUserId": 0,
                    "platform": PLATFORM_NUMBER.SUPPLIER_USER,
                    "pageIndex": this.state.pageIndex,
                    "pageSize": this.state.pageSize,
                }
            }
        })
        .then(res => {
            if(res.code==200){
                this.setState({
                    total:res.data.querySysUserDto.totalCount
                })
                console.log("cooper-返回数组list：",this.state.total)
            }
        });
    }
    //子组件调用的方法
    handleRefresh(){
        console.log('refresh......');
       this.getList();
    }

    // 解锁 锁定
    handleUnlock=(resule)=>{
        const {val}=this.state;
        const {Refresh}=this.props
        console.log("resule-userid:",resule)
        var cur = null
        Refresh.forEach(item => {
            if(item.userId == resule){ cur= item}
        })
        if( 1 == cur.status){
            const { dispatch } = this.props;
        dispatch({
            type:'cooperativeStore/updateUserBasicInfoStatus',
            payload: {
                data:{
                    "platform": PLATFORM_NUMBER.SUPPLIER_USER,
                    "status": 2,
                    "userId": resule
                }
            }
        }).then(res=>{
            if(res.code==200){
                message.success(`您的锁定成功`)
                this.getList();
            }else{
                message.success(`您的锁定失败`)
            }
        })
        }else if( 2 == cur.status){
            const { dispatch } = this.props;
            dispatch({
                type:'cooperativeStore/updateUserBasicInfoStatus',
                payload: {
                    data:{
                        "platform": 5,
                        "status":  1,
                        "userId": resule
                    }
                }
            }).then(res=>{
                if(res.code==200){
                    message.success(`您的解锁成功`)
                    this.getList();
                }else{
                    message.success(`您的解锁失败`)
                }
            })
        }
    }
    handleCancellation=(current)=>{
        const {Refresh}=this.props
        console.log("resule-userid:",current)
        var cur = null
        Refresh.forEach(item => {
            if(item.userId == current){
                cur= item
            }
        })
        if( 3 !==cur.status ){

            const { dispatch } = this.props;
            dispatch({
                type:'cooperativeStore/updateUserBasicInfoStatus',
                payload: {
                    data:{
                        "platform": 5,
                        "status":  3,
                        "userId": current
                    }
                }
            }).then(res=>{
                if(res.code==200){
                    message.success(`您的注销操作成功`)
                    this.getList()
                }else{
                    message.success(`您的注销操作失败`)
                }
            })
        }
    }
    // 向子组件传值的方法
    showModal = (val)=>{
        const {Refresh}=this.props
        let cur = null
        Refresh.forEach(item => {
            if(item.userId == val){
                cur = item
            }
        })
        this.setState({
            val: cur,
            visible: true
        })
    }
    changeStatus = (status) =>{
        this.setState({
          visible:status
        })
    }
    
    // 很奇怪这里的result就是子组件那bind的第一个参数this，msg是第二个参数
    getChildrenMsg = (result, msg) => {
        console.log("msg---------msg:",msg)
        this.setState({
            Refresh: msg
        })
    }

    render() {
        const {visible}=this.state;
        const {Refresh}=this.props
        const columns = [
            {
                title: '序号',
                render:(text,record,index)=>`${index+1}`,
                align: 'center',
              },
            {
              title: '账号',
              dataIndex: 'username',
              render: text => <a>{text}</a>,
            },
            {
              title: '姓名',
              dataIndex: 'name',
            },
            {
              title: '手机',
              dataIndex: 'mobile',
            },
            {
                title: '邮箱',
                dataIndex: 'email',
                align: 'center',
            },
            {
                title: '角色分组',
                dataIndex: 'roleName',
                align: 'center',
            },
            {
                title: '状态',
                dataIndex: 'status',
                align: 'center',
                render: (text, record) =>{
                    let span ='';
                    if(record.status == 1){
                        span = <span style={{color:'#343434'}}>有效</span>
                    }else if (record.status == 2){
                        span = <span style={{color:'#343434'}}>锁定</span>
                    } else if (record.status == 3){
                        span = <span style={{color:'#EB6F4E'}}>已注销</span>
                    }
                    return(<div>{span}</div> )

                }
            },
            {
                title: '操作',
                dataIndex: '',
                align: 'center',
                render: (text, record) =>{
                    let span ='';
                    
                    if(record.status == 1 ){
                        span= <span>
                                <a onClick={this.showModal.bind(this,record.userId)}>编辑</a>
                                <Divider type="vertical" />
                                <a onClick={ this.handleUnlock.bind(this,record.userId)}>锁定</a>
                                <Divider type="vertical" />
                                <a onClick={ this.handleCancellation.bind(this,record.userId)}>注销</a>
                            </span>
                    }else if(record.status == 2 ){
                        span= <span>
                                <a onClick={this.showModal.bind(this,record.userId)}>编辑</a>
                                <Divider type="vertical" />,
                                <a  onClick={ this.handleUnlock.bind(this,record.userId)}>解锁</a>
                                <Divider type="vertical" />
                                <a  onClick={ this.handleCancellation.bind(this,record.userId)}>注销</a>
                            </span>,
                            <Divider type="vertical" />
                    }else if(record.status == 3 ){
                        span= <span>
                             
                            </span>
                    }else{
                        span= <span><a onClick={ this.handleCancellation.bind(this,record.userId)}>注销</a></span>
                    }
                    return(<div>{span}</div> )
                }
            },
        ];
        

        return (
            <div>
                <div className={styles.content}>
                <SelectInput parent={ this } />
                </div>
                <div className={styles.content} style={{marginTop:"20px"}}>
                <AddAccount />
                <Table columns={columns} dataSource={Refresh}
                    pagination={{
                        showSizeChanger: true,
                        showQuickJumper: true,
                        defaultCurrent: 1,
                        // total: 500,
                        total: this.state.total,
                        pageSizeOptions:[10, 20, 30,40, 100],
                        showTotal: total => `共 ${total} 条`,
                        pageIndex: this.state.pageIndex,
                        onChange: this.changePage,
                        onShowSizeChange:this.sizeHandleChage
                      }}
                />
                </div>
                <ModefyAccount 
                    handleRefresh={this.getList}
                    visible={visible}
                    status={this.changeStatus}
                    val={this.state.val}
                />
            </div>
        )
    }
    changePage = (page,pageSize) => {
        console.log("page====:",page)
        this.setState({
            pageIndex: page, //当前页 
        },()=>{this.getList()}) 
    }
    sizeHandleChage=(current,size)=>{
        console.log("current====:",current,size)
        this.setState({
            pageSize:current*size //(this.total+pageSize-1)/pageSize,// 总页数=(总页数+页大小-1)/页大小
        },()=>{this.getList()})
    }
}